<template>
  <div class="full-page-loading" style="width: 100%; height: 100vh;">
    <div class="mikepad-loading">
      <div class="binding"></div>
      <div class="pad">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
      </div>
      <div class="text">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      default: '正在努力加载中...',
      type: String
    }
  }
}
</script>

<style lang="stylus" scoped>
.full-page-loading {
  *{
    -webkit-box-sizing:border-box;
    box-sizing:border-box
  }
  .mikepad-loading{
      width:150px;
      position:absolute;
      top:50%;
      left:50%;
      -webkit-transform:translateY(-50%) translateX(-50%);
      -moz-transform:translateY(-50%) translateX(-50%);
      -o-transform:translateY(-50%) translateX(-50%);
      transform:translateY(-50%) translateX(-50%)
  }
  .mikepad-loading .binding{
      content:'';
      width:32px;
      height:8px;
      border:2px solid #4400f8;
      margin:0 auto
  }
  .mikepad-loading .pad{
      width:32px;
      height:32px;
      border:2px solid #4400f8;
      border-top:0;
      padding:6px;
      margin:0 auto
  }
  .mikepad-loading .line{
      width:15px;
      margin-top:4px;
      border-top:2px solid #4400f8;
      opacity:0;
      -webkit-animation:writeline 1.2s infinite ease-in;
      -moz-animation:writeline 1.2s infinite ease-in;
      -o-animation:writeline 1.2s infinite ease-in;
      animation:writeline 1.2s infinite ease-in
  }
  .mikepad-loading .line:first-child{
      margin-top:0
  }
  .mikepad-loading .line.line1{
      -webkit-animation-delay:0s;
      -moz-animation-delay:0s;
      -o-animation-delay:0s;
      animation-delay:0s
  }
  .mikepad-loading .line.line2{
      -webkit-animation-delay:.2s;
      -moz-animation-delay:.2s;
      -o-animation-delay:.2s;
      animation-delay:.2s
  }
  .mikepad-loading .line.line3{
      -webkit-animation-delay:.4s;
      -moz-animation-delay:.4s;
      -o-animation-delay:.4s;
      animation-delay:.4s
  }
  .mikepad-loading .text{
      text-align:center;
      margin-top:10px;
      font-size:14px;
      color:#4400f8
  }
  @-webkit-keyframes writeline{
      0%{
          width:0;
          opacity:0
      }
      33%{
          width:15px;
          opacity:1
      }
      70%{
          opacity:1
      }
      100%{
          opacity:0
      }
  }
  @-moz-keyframes writeline{
      0%{
          width:0;
          opacity:0
      }
      33%{
          width:15px;
          opacity:1
      }
      70%{
          opacity:1
      }
      100%{
          opacity:0
      }
  }
  @-o-keyframes writeline{
      0%{
          width:0;
          opacity:0
      }
      33%{
          width:15px;
          opacity:1
      }
      70%{
          opacity:1
      }
      100%{
          opacity:0
      }
  }
  @keyframes writeline{
      0%{
          width:0;
          opacity:0
      }
      33%{
          width:15px;
          opacity:1
      }
      70%{
          opacity:1
      }
      100%{
          opacity:0
      }
  }
}
</style>
